<template>
  <div class="item guodu">
    <a :href="url" class="boxes">
      <div class="icon">
        <img src="@/assets/ioc_3.jpg">
      </div>
      <h6 class="guodu">{{ title }}</h6>
      <p>{{ desc }}</p>
    </a>
    <div class="ic"></div>
  </div>
</template>

<script>
export default {
  name: 'SolutionWidget',
  props: {
    url: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    desc: {
      type: String,
      required: true
    }
  }
}
</script>

<style lang="less" scoped>
.item {
  margin-right: 2%;
  margin-bottom: 24px;
  width: 32%;
  height: 297px;
  border: 1px solid #fff;
  background-color: #fff;
  background-position: bottom;
  background-size: 100% auto;
  background-repeat: no-repeat;
  .boxes {
    display: block;
    padding: 25px 8.3% 0;
    width: 100%;
    height: 100%;
  }
  .icon {
    margin-bottom: 20px;
    height: 43px;
    img {
      height: 100%;
    }
  }
  h6 {
    overflow: hidden;
    margin-bottom: 22px;
    color: #333;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 20px;
    line-height: 1;
  }
  p {
    overflow: hidden;
    height: 120px;
    color: #666;
    font-size: 13px;
    line-height: 24px;
  }
  .ic {
    position: absolute;
    bottom: 19px;
    left: 8.3%;
    width: 21px;
    height: 11px;
    background-position: 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}

.item:hover {
  border: 1px solid #ca3935;
  h6 {
    color: #ca3935;
  }
}

.guodu {
  transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
}
</style>
